<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules, UploadProps } from 'element-plus'

interface RuleForm {
  name: string
  type: string
  phone: string
  content: string
  fileList: UploadProps['fileList']
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  type: '',
  phone: '',
  content: '',
  fileList: [],
})

const rules = reactive<FormRules<RuleForm>>({
  type: [
    {
      required: true,
      message: '请选择输入类型',
      trigger: 'change',
    },
  ],
  name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return true
}

const typeOptions = reactive([
  {
    label: '多组学',
    value: '1',
  },
  {
    label: '单细胞组学',
    value: '2',
  },
  {
    label: '空间组学',
    value: '3',
  },
])
</script>

<template>
  <div class="research-service-zixun-container">
    <div class="common-banner">
      <img src="@/assets/images/square/app-market-banner.png" alt="" />
      <div class="content">
        <div class="common-w-box">
          <div class="txt-c">
            <div class="t1" style="text-align: left">科研顾问服务简介</div>
            <div class="des">
              顾问团提供了丰富的经验,企业可根据凭证调用企业自身的员工、客户数据进行数据分析,同时可使用AI与企业内部系统进行数据互通。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="common-w-box">
      <div class="cnb">
        <div class="zx-cnb">
          <div class="avatar">
            <el-avatar :size="120" />
          </div>
          <div class="txt-c">
            <div class="bt">人名人名</div>
            <div class="des">
              这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注
            </div>
          </div>
          <div class="awm">
            <el-avatar :size="145" shape="square" />
          </div>
        </div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          status-icon
        >
          <el-form-item label="咨询类型" prop="type">
            <el-select
              v-model="ruleForm.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input
              v-model="ruleForm.content"
              :rows="10"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item label="上传附件" prop="fileList">
            <el-upload
              v-model:file-list="ruleForm.fileList"
              :show-file-list="false"
              action="#"
              multiple
              :before-remove="beforeRemove"
              :limit="1"
              :on-exceed="handleExceed"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="联系人" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入联系方式" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.research-service-zixun-container {
  .cnb {
    padding: 50px 20px;
    margin: 16px 0;
    background: #fff;
    border-radius: 4px;
  }

  .zx-cnb {
    display: flex;
    align-items: center;
    padding: 30px;
    margin-bottom: 16px;
    background: #f7f8fa;
    border-radius: 4px;

    .avatar {
      width: 120px;
    }

    .txt-c {
      flex: 1;
      padding: 0 60px 0 30px;

      .bt {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        color: #021429;
      }

      .des {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        color: #8691a3;
      }
    }

    .awm {
      width: 145px;
    }
  }
}
</style>
